//数字监控ecahrts option

import echarts from 'echarts'
let colors = ['rgba(253, 184, 25, 1)', 'rgba(5, 205, 138, 1)']
let fontSize = 16;
export function progress (data) {
    data.reverse()
    let barWidth = 10;/* 进度条及进度条radius宽度 */
    let unit = ''; /* 单位 */
    let salvProMax = []; /* 背景条数据 */
    let maxValue = 1;
    for (let item of data) {
        if (item.value > maxValue) {
            maxValue = item.value
        }
    }

    /* 该值无具体作用，取进度最大值 * 1.2 */
    salvProMax = Array(data.length).fill(maxValue ? maxValue : 1);
    let option = {
        tooltip: {
            show: false,
        },
        grid: {
            left: '5%',
            right: '5%',
            top: '0',
            bottom: '0',
            containLabel: true,
        },
        legend: {
            show: false,
        },
        xAxis: {
            show: false,
        },
        yAxis: [
            {
                type: 'category',
                axisTick: 'none',
                axisLine: 'none',
                show: true,
                offset: 100,
                axisLabel: {
                    color: '#0F1826',
                    fontSize: fontSize,
                    align: 'left',
                },
                data: data.map(i => i.name),
            },
            {
                type: 'category',
                axisTick: 'none',
                axisLine: 'none',
                show: true,
                position: 'right',
                axisLabel: {
                    textStyle: {
                        color: '#1F4265',
                        fontSize: fontSize
                    },
                    formatter: (val) => {
                        return `${val} ${unit}`;
                    },
                },
                data: data.map(i => i.value),
            },
        ],
        series: [
            // 进度条
            {
                zlevel: 1,
                name: '',
                type: 'bar',
                barWidth: barWidth,
                data: data,
                align: 'center',
                itemStyle: {
                    barBorderRadius: barWidth,
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                        {
                            offset: 0,
                            color: '#6390F0',
                        },
                        {
                            offset: 1,
                            color: '#25EBE9',
                        },
                    ]),
                },
                label: {
                    show: false,
                },
            },
            // 背景条
            {
                name: '',
                type: 'bar',
                barWidth: barWidth,
                barGap: '-100%',
                data: salvProMax,
                itemStyle: {
                    normal: {
                        barBorderRadius: barWidth,
                        color: 'rgba(233, 236, 240, 1)',
                    },
                },
            },
        ],
    };
    return Object.seal(option)
}

export function line (data) {
    /**
       * 请保证data的数据结构如下
       *  [  { name:'名称1',  value:'653' } ]
       */
    return {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#3587ff'
                },
            },
            formatter: (series) => {
                if (data.length) {
                    const item = data.filter((item) => item.name === series[0].axisValueLabel)[0];
                    return `${item.name}:  签到${item.value}人`;
                }
            },
        },
        grid: {
            top: '35',
            right: '20',
            left: '20',
            bottom: '15',
            containLabel: true
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: data.map(i => i.name),
            axisLabel: {
                //x轴文字的配置
                color: 'rgba(97, 103, 122, 1)',
                rotate: 40,
                show: true,
                interval: 0,//使x轴文字显示全
                fontSize: 12
            },
            axisLine: {
                show: false
            },
            axisTick: {
                show: false
            }
        },
        yAxis: [
            {
                name: '(人)',
                nameTextStyle: {
                    padding: [0, 20, 0, 0],
                    color: 'rgba(97, 103, 122, 1)'
                },
                type: 'value',
                splitNumber: 3,
                axisLabel: {
                    color: 'rgba(97, 103, 122, 1)',
                    fontSize: 12
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            },
            {
                name: '近一周',
                nameTextStyle: {
                    padding: [0, 0, 0, 0],
                    color: 'rgba(97, 103, 122, 1)'
                },
                type: 'value',
                splitNumber: 3,
                axisLabel: {
                    color: 'rgba(97, 103, 122, 1)',
                    fontSize: 12
                },
                axisLine: {
                    show: false
                },
                axisTick: {
                    show: false
                }
            },
        ],
        series: [
            {
                name: '总数',
                type: 'line',
                stack: 'Total',
                showSymbol: true,
                smooth: true,
                label: {
                    show: true,
                    position: 'insideBottom',
                    fontSize: 12,
                    color: '#3587ff'
                },
                emphasis: {
                    focus: 'series'
                },
                data: data.map(i => i.value),
                areaStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: 'rgba(98, 187, 255, 0.22)'
                        },
                        {
                            offset: 1,
                            color: 'rgba(51, 133, 255, 0)'
                        }
                    ])
                },
                color: '#3587ff'
            }
        ]
    }
}

export function pie (data, text) {
    const colorList = ['#3385ff', '#ff9251'];
    let option = {
        title: {
            text: text,
            top: '35%',
            textAlign: 'center',
            left: '50%',
            textStyle: {
                color: ' #0F1826',
                fontSize: 24,
                fontWeight: '600',
                lineHeight: 24,
            },
            subtext: '可视率',
            subtextStyle: {
                color: '#61677A',
                fontSize: 18,
                fontWeight: '600',
                lineHeight: 18,
            },
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} ({d}%)',
        },
        series: [
            {
                type: 'pie',
                center: ['50%', '50%'],
                radius: ['60%', '100%'],
                avoidLabelOverlap: false,
                label: {
                    show: false,
                    position: 'center',
                },
                itemStyle: {
                    normal: {
                        color: function (params) {
                            return colorList[params.dataIndex];
                        },
                        borderColor: '#fff',
                        borderWidth: 10,
                    },
                },
                labelLine: {
                    show: false,
                },
                data: data,
            },
        ],
    };
    return option
}